<style>
    .shortInput
    {
        width: 150px
    }

    .grid-wrap table td {
    }

    table.reserve_table {
        margin: 20px 0px 0px 30px;
        border-collapse: collapse;
        text-align: center;
    }

    th.reserve_slot_timespan {
        border: 1px solid gray;
        background-color: aliceblue;
        width: 56px;
    }

    td.reserve_slot_content {
        border: 1px solid gray;
        height: 60px;
        width: 28px;
        background-color: #CCFFFF;
    }

    td.reserved {
        background-color:#FFCCCC;
    }
</style>
<span id="${uuid}"></span>

<shiro:hasPermission name="meetingroom:reservation:all">
    <div class="box_tc_s" style="height: auto">
        <form method="post" data-id="form-meeting-add-reservation" method="post"
              action="${pageContext.request.contextPath}/app/api/meeting/reservation/add">
            <table border="0" cellpadding="0" cellspacing="0" class="hydra-table">
                <tr>
                    <td class="hydra-left width90"><span class="nes-tip">*</span>会议日期：</td>
                    <td class="hydra-right">
                        <div>
                            <input type="text" class="hydra-input-width shortInput" data-id="meeting-date"
                                   name="date" data-options="required:true,editable: false"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="hydra-left width90"><span class="nes-tip">*</span>会议时间：</td>
                    <td class="hydra-right">
                        <select data-id="meeting-beginHour" name="beginTimeIndex" data-options="required:true,editable: false"
                                class="easyui-validatebox hydra-input-width shortInput">
                            <option value="0">8:00</option>
                            <option value="1">8:30</option>
                            <option value="2">9:00</option>
                            <option value="3">9:30</option>
                            <option value="4">10:00</option>
                            <option value="5">10:30</option>
                            <option value="6">11:00</option>
                            <option value="7">11:30</option>
                            <option value="8">12:00</option>
                            <option value="12">14:00</option>
                            <option value="13">14:30</option>
                            <option value="14">15:00</option>
                            <option value="15">15:30</option>
                            <option value="16">16:00</option>
                            <option value="17">16:30</option>
                            <option value="18">17:00</option>
                            <option value="19">17:30</option>
                            <option value="20">18:00</option>
                            <option value="21">18:30</option>
                            <option value="22">19:00</option>
                            <option value="23">19:30</option>
                            <option value="24">20:00</option>
                        </select>
                        <span>开始</span>
                        <select data-id="meeting-length" name="slotCount" data-options="required:true,editable: false"
                                class="easyui-validatebox hydra-input-width shortInput">
                            <option value="1">0.5</option>
                            <option value="2">1.0</option>
                            <option value="3">1.5</option>
                            <option value="4">2.0</option>
                            <option value="5">2.5</option>
                            <option value="6">3.0</option>
                            <option value="7">3.5</option>
                            <option value="8">4.0</option>
                        </select>
                        <span>小时</span>
                    </td>
                </tr>
                <tr>
                    <td class="hydra-left width90"><span class="nes-tip">*</span>会议室：</td>
                    <td class="hydra-right">
                        <select data-id="meeting-room" name="meetingRoom" data-options="required:true,editable:false"
                                class="easyui-validatebox hydra-input-width">
                            <option value="0">504大会议室</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="hydra-left width90"><span class="nes-tip">*</span>会议主题：</td>
                    <td class="hydra-right">
                        <input type="text" data-id="meeting-subject" name="meetingSubject"
                               class="easyui-validatebox hydra-input-width"
                               data-options="required:true,validType:['length[0,30]']"
                               placeholder="" value=""/>
                    </td>
                    <td class="hydra-left width90">
                        <input type="hidden" name="reserveUser.id" value="${loginUser.id}" data-id="reserveUserId" />
                    </td>
                </tr>
                <tr>
                    <td class="hydra-left width90">备注：</td>
                    <td class="hydra-right">
                    <textarea
                            data-id="meeting-remark" name="remark"
                            class="easyui-validatebox hydra-textarea hydra-input-width" draggable="false"
                            data-options="required:false,validType:['normalChar','length[0,200]']"
                            placeholder="备注..">
                    </textarea>
                        <a data-id="next" href="javascript:void(0)" iconCls="fa fa-check fa-lg" style="margin-left: 100px">预约</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <br/>
    <br/>
    <h2>预约状况</h2>
    <table id="table-timeslots" class="reserve_table">
        <tr class="reserve_row_time">
            <th class="reserve_slot_timespan" colspan="2">08:00-09:00</th>
            <th class="reserve_slot_timespan" colspan="2">09:00-10:00</th>
            <th class="reserve_slot_timespan" colspan="2">10:00-11:00</th>
            <th class="reserve_slot_timespan" colspan="2">11:00-12:00</th>
            <th class="reserve_slot_timespan" colspan="2">12:00-13:00</th>
            <th class="reserve_slot_timespan" colspan="2">13:00-14:00</th>
            <th class="reserve_slot_timespan" colspan="2">14:00-15:00</th>
            <th class="reserve_slot_timespan" colspan="2">15:00-16:00</th>
            <th class="reserve_slot_timespan" colspan="2">16:00-17:00</th>
            <th class="reserve_slot_timespan" colspan="2">17:00-18:00</th>
            <th class="reserve_slot_timespan" colspan="2">18:00-19:00</th>
            <th class="reserve_slot_timespan" colspan="2">19:00-20:00</th>
            <th class="reserve_slot_timespan" colspan="2">20:00-21:00</th>
            <th class="reserve_slot_timespan" colspan="2">21:00-22:00</th>
            <th class="reserve_slot_timespan" colspan="2">22:00-23:00</th>
            <th class="reserve_slot_timespan" colspan="2">23:00-24:00</th>
        </tr>
        <tr class="reserve_row_content">
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
            <td class="reserve_slot_content"></td>
        </tr>
    </table>
    <br/>
    <br/>
    <h2>会议详情</h2>
    <div class="grid-wrap">
        <table data-id="grid-meetingList"></table>
    </div>
</shiro:hasPermission>
<div data-id="meeting_operation_tempate">
    <shiro:hasPermission name="meetingroom:reservation:all">
        <a data-href="${pageContext.request.contextPath}/app/api/meeting/reservation/delete" data-id="{{id}}" data-key="del" iconCls="fa fa-remove fa-lg" plain="true">取消</a>
    </shiro:hasPermission>
</div>
